<template>

   <div class="container">
       <div class="title">
            <h2>数据分析/销售概况</h2>
       </div>
       <div class="containerS">
       <div class="banner">
           <ul class="bannerlist">
               <li>
                   <p class="word">今日销售</p>
                   <p class="num">1800.00</p>
                   <p class="number">订单数  <span>333</span></p>
                   
                   </li>
               <li>

                   <span class="hr1"></span>
                   <!-- <span class="wordnum1">截至昨日数据</span> -->
               </li>
               <li>
                    <p class="word">近一周销售</p>
                   <p class="num">1800.00</p>
                   <p class="number" style="color:#ff9078">周同比  <span>333</span></p>
               </li>
               <li>
                    <p class="word">近一月销售</p>
                   <p class="num">1800.00</p>
                   <p class="number"  style="color:#7dd64e">月同比  <span>333</span></p>
               </li>
               <li>
                    <p class="word">总销售</p>
                   <p class="num">1800.00</p>
               </li>
               <li>
                    <p class="word">订单总数</p>
                   <p class="num">1800.00</p>
               </li>
               <li>
                    <p class="word">进一月营销额  <span class="el-icon-question"></span></p>

                   <p class="num">1800.00</p>
               </li>
           </ul>
       </div>


       <div class="nav">
           <div class="top-left">

           </div>
                 <div class="top-right">
        <!-- 日期选择 -->
              <el-date-picker
            @change="TimetoChange()"
            v-model="orderTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2">
           
          </el-date-picker>
       
         <!-- 时间选择 -->
            <div class="seleclist">
            <span @click="LATESTDAYS(1)">今天</span>
            <span @click="LATESTDAYS(7)"  >最近7天</span>
           
            </div>
          <Select class="toolbar-item Select" clearable v-model="orderStatus" @on-change="search" style="width:150px;border:1px solid #ccc" placeholder="状态">
                <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
         </div>
       </div>
       <div class="charts">
            <div id="eChart" :style="{width: '100%', height: '100%'}" ref="myEchart"></div>
       </div>

         <div class="title">
               <h2>
                   总体销售明细
               </h2>
            </div>
           <div class="mainlist">
           
                    
                    <div class="top-right">
                  <!-- 日期选择 -->
                        <el-date-picker
                        @change="TimetoChange()"
                        v-model="orderTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions2">
                    
                    </el-date-picker>
                
                    <!-- 时间选择 -->
                        <div class="seleclist">
                        <span @click="LATESTDAYS(1)">今天</span>
                        <span @click="LATESTDAYS(7)"  >最近7天</span>
                    
                        </div>
                    <Select class="toolbar-item Select" clearable  @on-change="search" style="width:150px;border:1px solid #ccc" placeholder="状态">
                            <Option v-for="item in statusList" :value="item.value" :key="item.value" >{{ item.label }}</Option>
                        </Select>
                    </div>
                    <div class="top-left">
                       <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload" >导出</el-button>
                       <!-- <el-button  class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button> -->
                    </div>

           </div>


                    <div class="getgoodlist">
                         <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"

                            >
                            <el-table-column
                            prop="date"
                            label="日期"
                            sortable
                            >
                            </el-table-column>
                            <el-table-column
                            prop="Consumption"
                            label="销售金额"
                            sortable
                           >
                            </el-table-column>
                             <el-table-column
                            prop="OrdersTotal"
                            label="订单总数"
                            sortable
                            >
                            </el-table-column>
                             <el-table-column
                            prop="TotalSold"
                            label="出售商品数量"
                            sortable
                            >
                            </el-table-column>
                             <el-table-column
                            prop="discount"
                            label="促销优惠金额"
                            sortable
                           >
                            </el-table-column>
                             <el-table-column
                            prop="RefundAmount"
                            label="退款金额"
                            sortable
                            >
                            </el-table-column>
                             <el-table-column
                            prop="Overdueamount"
                            label="过期金额"
                            sortable
                           >
                            </el-table-column>
                             <el-table-column
                            prop="TotalAmount"
                            label="总额"
                            sortable
                            >
                            </el-table-column>
                        </el-table>
                        	    <div class="Pagination" style="text-align: left;margin-top: 20px;float:right;padding-right:40px">
                               <div class="page-foot">
                                        <el-pagination @size-change="handleSizeChange" 
                                        @current-change="handleCurrentChange" 
                                        :current-page="pageNumber" :page-sizes="[3, 10, 50, 100]" 
                                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" 
                                        :total="totalCount">
                                        </el-pagination>
                                    </div>
                    </div>
                    </div>

       </div>
    </div>
   
</template>
<script>
import { parseTime } from '@/utils'
import waves from '@/utils/waves' // Waves directive
import axios from "../../utils/fetch.js";
export default {
  data() {
    return {
      //按组
      statusList: [
        {
          value: 0,
          label: "组一"
        },
        {
          value: 1,
          label: "组二"
        },
        {
          value: 2,
          label: "组三"
        }
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      //选择日期
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },

      pageNumber: 1, // 页码
      pageSize: 5, // 页容量
      totalCount: 20, //总数
      downloadLoading: false,
      orderTime: [],
      orderStatus: ""
    };
  },
  mounted() {
    this.eCharts();
 
  },
  created() {
    this.Myordergoodlist();
  },
  methods: {

    eCharts() {
      let eChart = this.$echarts.init(document.getElementById("eChart"));

      var option = {
        // title: {
        //   text: "折线图堆叠"
        // },
        tooltip: {
          trigger: "axis"
        },
        color: ["#5ebe67", "#3c90f7"],
        calculable: true,
        legend: {
          data: ["销售额", "销售量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: [
          {
            type: "value",
            name: "销售量",
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          {
            type: "value",
            name: "销售额",
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: "销售量",
            type: "line",
            stack: "总量1",
            yAxis: 1,
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "销售额",
            type: "line",
            stack: "总量2",
            yAxisIndex: 1,
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      eChart.setOption(option);
    },
    //状态搜索
    search() {},

    //查询页面的数据
    Myordergoodlist() {
      axios.historySaledata().then(res => {
           this.SaledataList = res.data.data;
           console.log( this.SaledataList )
      });
    },

    // 当页容量改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageNumber = 1;
      this.Myordergoodlist();
    },
    // 当页码改变
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber;
      this.Myordergoodlist();
    },
    // 下载
    //下载
   handleDownload(){
          require.ensure([], () => {
            const { export_json_to_excel } = require('../../assets/js/Export2Excel');
            const tHeader = [ '时间', '销售金额', '订单总数','出售商品数量','促销优惠金额','退款金额','过期金额','总额'];
            const filterVal = ['date', 'Consumption', 'OrdersTotal','TotalSold','discount','RefundAmount','Overdueamount','TotalAmount'];
            const list = this.tableData;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '列表excel');
          })
        },
        formatJson(filterVal, jsonData){
          return jsonData.map(v => filterVal.map(j => v[j]))
        },


    //日期选择计算
    TimetoChange() {
      // 计算时间间隔
      var date = new Date(this.orderTime[0]); //开始时间
      var startData =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      //  "yyyy-MM-dd ");
      var dataold = new Date(this.orderTime[1]); //结束时间
      this.endDateStr =
        date.getFullYear() +
        "-" +
        (dataold.getMonth() + 1) +
        "-" +
        dataold.getDate();
      var LentData = dataold.getTime() - date.getTime(); //时间差的毫秒数
      //计算出相差天数
      this.interval = Math.floor(LentData / (24 * 3600 * 1000));
      //调用环形图



      this.recentDay = this.interval;
      // this.echarts(this.interval);
      // this.drawLine(this.recentDay);
    },
    //最近7天-最近一个月
    LATESTDAYS(value) {
      if (value == 1) {
        this.recentDay = 1;
        this.interva = 1;
        this.drawLine();
        this.echarts();
      } else if (value == 7) {
        this.recentDay = 7;
        this.drawLine();
        this.weekdaty();
      } else if (value == 30) {
        this.recentDay = 30;
        this.drawLine();
        this.mounthdaty();
      }
    },

    // 前一周时间
    weekdaty() {
      const end = new Date(); //
      //  "yyyy-MM-dd ");
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      var now = new Date();
      var date = new Date(now.getTime() - 7 * 24 * 3600 * 1000);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      var starttime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      var endtime =
        end.getFullYear() + "-" + (end.getMonth() + 1) + "-" + end.getDate();
      var LentData1 = end.getTime() - start.getTime(); //时间差的毫秒数
      //计算出相差天数
      var interval1 = Math.floor(LentData1 / (24 * 3600 * 1000));
      this.endDateStr = endtime;
      this.interval = interval1;
      // this.echarts(interval1);
    },

    //前一个月时间
    mounthdaty() {
      var today = new Date();
      var start = new Date(today.getTime() - 31 * 24 * 3600 * 1000);
      var start1 =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate();
      var todaytime1 =
        today.getFullYear() +
        "-" +
        (today.getMonth() + 1) +
        "-" +
        today.getDate();
      var LentData1 = today.getTime() - start.getTime(); //时间差的毫秒数
      //计算出相差天数
      var interval1 = Math.floor(LentData1 / (24 * 3600 * 1000));
      this.interval = interval1;
      this.endDateStr = todaytime1;
      // this.echarts(interval1,todaytime1);
    },
    
  }
};

</script>
<style >
@import "../../style/MarketingList/Sales.css";
</style>
